<template>
  <div class='page grey-stage source-new-custom'>
    <crm-cover v-if="isShowCover" :hideOnBlur="false"></crm-cover>
    <div
    class="scroll-container"
    :style="{
      'padding-top': this.scrollerTop + 'px',
      'height': this.scrollerHeight + 'px',
      'width': this.winWidth + 'px'
    }"
    >
      <div class="no-data-tip" v-if="!Object.keys(data).length">暂无数据</div>

      <div class="section-title">
        <Echart class="echart" :options="options" v-if="options" />
      </div>

      <div class="bottom">
        <div class="box" v-for="(value, index) in data" >
          <div class="left">
            <p>{{value.source_name}}</p>
            <mt-progress :value="parseInt(value.custom_rate)" :bar-height="10" :color="value.color" class="new-custom"></mt-progress>
          </div>
          <div class="middle">
            <p>{{ value.custom_count }}人</p>
            <p>{{ value.custom_rate }}%</p>
          </div>
          <div class="right">
            <router-link
              class="crm-title-text more"
              :to="{name: 'new-custom-analyze-source', query:{team_id: teamId,time: defaultTime,source_id:value.source_id}}">
              <slot name="right">
                <img class="nav-arrow" src="//fin.91mycloud.com/arrow-go-grey.png" />
              </slot>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <crm-tabbar v-if="!isAppMode" activeItem='workbench' ref="tabbar"></crm-tabbar>
  </div>
</template>

<script>
import crmTabbar from '../components/crm-tabbar'
import topFilter from '../components/top-filter'
import MemberItem from '../components/ranking/member-item'
import Echart from '../components/Echarts'
require('echarts/lib/chart/pie')
require('echarts/lib/component/title')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')


import Q from 'q'
import crmCover from '../components/crm-cover'
import { mapState, mapActions } from 'vuex'
import { Progress } from 'mint-ui'

import { timeOpts } from '../lib/options/time'

export default {
  data () {
    return {
      scrollerTop: '',
      scrollerHeight: '',
      winWidth: '',
      timestamp: '',
      defaultTime: '',
      teamName: '',
      teamId: '',
      yearsCount: 3, // 可以查{ yearsCount }年的数据
      options:null,
      data: [],
      title: [],
      x_axis: []
    }
  },
  components: {
    topFilter,
    crmCover,
    crmTabbar,
    MemberItem,
    'mt-progress': Progress,
    Echart
  },
  mounted () {
    // this.callJsApi('biz.navigation.setTitle', { title: '成员排行' })
    // const query = this.$route.query
    // this.teamId = query.team_id
    // this.defaultTime = parseInt(this.$route.query.time)
    // this.initData()

    this.$nextTick(() => {
      this.caculateScroller()
    })

    this._initialize()
  },
  watch: {
    windowSize (size) {
      this.caculateScroller()
    },
  },
  computed: {
    ...mapState({
      isShowCover: state => state.app.isShowCover,
      totalTarget: state => state.app.target,
      user: state => state.app.user,
      windowSize: state => state.app.windowSize,
      isAppMode: state => state.config.isAppMode
    })
  },
  methods: {
    initData () {
      const defaultParams = this.getDefaultParam()
      this.timestamp = defaultParams.timestamp
      this.$getNewCustomList(defaultParams)
    },
    $getNewCustomList (defaultParams) {
      const teamId = this.teamId
      this.$vux.loading.show()
      defaultParams = Object.assign({
        team_id: teamId
      }, defaultParams)
      this.getNewCustomSourceList(defaultParams)
        .then((response) => {
          if (response.data.errcode === 0) {
            const results = response.data.results
            this.data = results.data
            this.title = results.title
            this.x_axis = results.x_axis
            console.log('www', this.data)
            this.$vux.loading.hide()
          }
        }).catch(() => {
        this.$vux.loading.hide()
      })
    },
    getDefaultParam () {
      const dateObj = new Date()
      let currentYear = dateObj.getFullYear()
      let currentMonth = dateObj.getMonth()
      let currentMonthDate = new Date(currentYear, currentMonth)
      return {
        timestamp: this.defaultTime || currentMonthDate
      }
    },

    caculateScroller () {
      const winHeight = window.innerHeight
      const filterHeight = 0
      const tabbarHeight = this.$refs['tabbar'] ? this.$refs['tabbar'].$el.offsetHeight : 0;
      this.scrollerTop = filterHeight || 42
      this.scrollerHeight = winHeight - filterHeight
      if (!this.isAppMode) {
        this.scrollerHeight = this.scrollerHeight - tabbarHeight
      }
      this.winWidth = window.innerWidth;
    },
    async _initialize () {
      const query = this.$route.query
      this.teamId = query.team_id
      this.defaultTime = parseInt(this.$route.query.time)
      let defaultParams = this.getDefaultParam()
      defaultParams = Object.assign({
        team_id: this.teamId
      }, defaultParams)
      const res = await this.getNewCustomSourceList(defaultParams)

      this.data = res.data.results.data || []
      this.title = res.data.results.x_axis || []

      const color = []
      const option = []
      this.data.forEach((source) => {
        option.push({
          value: source.custom_count,
          name: source.source_name
        })
        color.push(source.color)
      })

      this.options = {
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: color,
        legend: {
          orient: 'vertical',
          right: '14%',
          top: '30%',
          data: this.title
        },
        series: [
          {
            name: '来源分布',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['30%', '40%'],
            label: {
              normal: {
                formatter: '{abg|}\n{hr|}\n{b|{b}:}{c}',
                // zIndex: 2,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    width: '50%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              }
            },
            data:option,
              // [{value: 50, name: '团队内客户'},
              // {value: 50, name: '公司公海客户'},
              // {value:this.site.do_ling_custom_count, name:'大龄公海客户'},
              // {value:this.site.di_ling_custom_count, name:'低龄公海客户'},
              // {value:this.site.wu_xiao_custom_count, name:'无效公海客户'}],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

    },
    ...mapActions({
      getMemberRankingData: 'getMemberRankingData',
      getNewCustomSourceList: 'getNewCustomSourceList'
    })
  },

}
</script>

<style lang="less">
.source-new-custom {

  .section-title {
    background-color: #f8f8f8;
    margin-top: 10px;
  }
  .bottom {
    background-color: #f8f8f8;
    margin-top: 10px;
    margin-bottom: 52px;
  }

  .echart {
    padding-top: 20px;
    width: 100%;
    height: 320px;
  }

  .scroll-container {
    padding-bottom: 52px;
  }

  .box {
    width: 100%;
    overflow: hidden;
    color: #8F939A;
    font-size: 14px;
    padding-bottom:10px;
    padding-left: 20px;
    padding-top:10px;
    .left{
      width: 75%;
      float: left;
    }
    .spanStyle{
      color:#d9d9d9;
      margin-left: 5px;
    }

    .middle{
      width:12%;
      float: left;
      text-align: center;
    }

    .right {
      float: right;
      /*width:auto;*/
      padding-top:20px;
      padding-right:30px;
    }

    .new-custom{
      .mt-progress-progress {
        background-color: #70c9f4;
        border-radius: 5px;
      }
    }
  }

}
</style>
